<template>
  <div>
    <el-table :data="datas" border fit highlight-current-row style="width: 100%">
      <el-table-column
        prop="name"
        label="属性"
        width="220"
      >
        <template slot-scope="scope">
          <el-input v-if="scope.row.id === undefined" v-model="scope.row.name" size="mini" placeholder="属性名" />
          <span v-else>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="value"
        label="值"
        width="500"
      >
        <template slot-scope="scope">
          <el-input v-model="scope.row.value" size="mini" placeholder="值" />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="180"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click.prevent="removeItem(scope.row)">删 除</el-button>
          <el-button v-if="scope.row.id" size="mini" type="success" @click.prevent="saveItem(scope.row)">修 改</el-button>
          <el-button v-else size="mini" type="success" @click.prevent="saveItem(scope.row)">保 存</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="onAdd">添加</el-button>
    <el-divider>系统属性名称</el-divider>
    <el-alert type="warning">系统属性名称必须与下列表属性名相同例如:【财务费用类型】 必须是这个名字才能在相应的功能模块起效</el-alert>
    <el-table :data="systemattrs" border fit highlight-current-row>
      <el-table-column
        prop="name"
        label="属性"
        width="220"
      />
      <el-table-column
        prop="desc"
        label="用途"
        width="220"
      />
      <el-table-column
        prop="value"
        label="值举例"
      />

    </el-table>
  </div>
</template>

<script>
import { UpdateProjectAttr, ShowProjectAttr, DeleteProjectAttr } from '@/api/erp/elicink/project'
export default {
  name: 'ProjectAttr',
  props: ['project_id'],
  data() {
    return {
      systemattrs: [
        {
          name: '财务费用类型',
          value: '收入|支出|运营成本|服务费|其他费用',
          desc: '财务费用类型, 用于财务报表，设置好之后请勿随意删除'
        },
        {
          name: '财务交易类型',
          value: '销售收入|服务收入|利息收入|产品采购支出|运输费支出|关税支出|汇损支出',
          desc: '财务交易类型, 用于财务报表，设置好之后请勿随意删除'
        },
        {
          name: '订单属性',
          value: '产品类型|订制方式|样衣数量|试单数量|大货数量|样品交期|大货交期|尺码要求|细节需求|其他需求|报价备注',
          desc: '订单属性, 用于采购订单管理，设置好之后请勿随意删除'
        },
        {
          name: 'openai_api_key',
          value: 'deepbricks|xxxxxxxx',
          desc: 'openai 或者相关服务的api,deepbricks代表平台，目前只支持这一个代理平台'
        },
        {
          name: '新询盘提醒',
          value: '1',
          desc: '是否开启新询盘提醒，如果开启，直接删除本属性'
        },
        {
          name: 'quote_summary',
          value: '193',
          desc: '询盘总结的prompts id，会在询盘邮件中自动分析询盘内容'
        },
        {
          name: 'email_prompt',
          value: '19,23',
          desc: '回复邮件的prompts列表，可以多个，会在询盘邮件中自动执行跟邮件有关的prompts'
        },
        {
          name: 'whatsapp_prompts',
          value: '19,23',
          desc: 'whatsapp使用中的相关prompts的id列表，可以多个，会在whatsapp中自动执行跟whatsapp有关的prompts'
        }
      ],
      datas: [],
      preFields: [
        {
          label: '员工数量',
          name: 'max_user'
        },
        {
          label: '图片存储',
          name: 'image_cloud_type'
        }
      ],
      ajaxLoading: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      ShowProjectAttr(this.project_id)
        .then(response => {
          this.datas = response.data
        })
    },
    removeItem(item) {
      // 根据 name 删除item
      this.datas = this.datas.filter(data => data.name !== item.name)
      if (item.id) {
        DeleteProjectAttr(item.id)
          .then(response => {
            this.notify('删除成功')
          })
      }
    },
    onAdd() {
      this.datas.push({
        name: '',
        value: ''
      })
    },
    saveItem(item) {
      this.ajaxLoading = true
      if (this.project_id instanceof Array) {
        UpdateProjectAttr({ 'datas': [item] })
          .then(response => {
            this.$emit('reload')
            this.notify('修改成功')
            this.ajaxLoading = false
          })
          .catch(e => {
            this.ajaxLoading = false
          })
      } else {
        UpdateProjectAttr({ 'datas': [item] })
          .then(response => {
            this.$emit('reload')
            this.notify('修改成功')
          })
          .catch(e => {
            this.ajaxLoading = false
          })
      }
    },
    notify(message, duration) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success',
        duration: duration || 2000
      })
    }
  }
}
</script>

<style scoped>
  .demo-form-inline .el-input.el-input--mini {
    width: 35%
  }
</style>
